<%@page import="model.environment.*"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<% 	PageViewInfo pvi = new PageViewInfo(); %>
<%@include file="parts/header.jsp" %>
	<%
		int itemID = 0;
		boolean success = true;  
		
		try {
			itemID = Integer.parseInt(request.getParameter("itemID"));
		} catch (NumberFormatException e) {
			success = false;
		}
	
		Item item = Items.getItem(itemID);
		
		if (item == null) {
			success = false;
		}
	%>
	
	<% if (success) { %>
	<script type="text/javascript">
		$(document).ready(function(){	
			// naturalWidth
			$("#previewImage").click(function(){
				var src = $("#previewImage").attr("src");
				$.modal('<div class="imageBigDiv"><img src="' + src + '" /></div>', {
				    overlayClose:true
				}); 
				$("img").properload(function (){
					width = $(".imageBigDiv").find("img").naturalWidth;
					if (width == undefined)
						width = $(".imageBigDiv").find("img").width();
					height = $(".imageBigDiv").find("img").naturalHeight;
					if (height == undefined)
						height = $(".imageBigDiv").find("img").height();
					if (width != 0)
					{
						$(this).parents(".simplemodal-container").width(width + 20);
						$(this).parents(".simplemodal-container").height(height + 20);
					}
				}, true);
				
			});
		});	
	</script>
	<%
 	List<Integer> IDs = Datamining.getItemsFrequentlyBoughtWith(item.getItemID(), 5);
 	List<Item> recItems = new ArrayList<Item>();
 	for(Integer i: IDs) {
 		Item it = Items.getItem(i);
 		recItems.add(it);
 	} %>
	<div class="content">
		<div style="width:200px;margin:0 50px;float:left;">
			<ul>
				<li>Name: <%= item.getItemName() %></li>
				<li>Price: <%= item.getItemPrice() %></li>
				<li>No. in stock: <%= item.getItemStock() %></li>
		 	</ul>
		 	<div style="margin:10px 0 20px 0;display:block">
		 		<%= item.getItemDescription() %>
		 	</div>
		 	<form action="addToBasket.do" method="get">
				<input type="hidden" value="<%=item.getItemID()%>" name="itemID" /> 
				<input type="text" value="1" name="amount" style="width:30px;padding:1px 2px;font-size:16px;"/>
		 		<input type="submit" value="Add to basket" style="font-size:14px;padding:7px 3px;"/>
		 	</form>
		</div>
		<div style="width:400px;float:left;">
			<img id="previewImage" style="cursor:pointer;" width="400" src="<%= item.getItemURL() %>" ALT="<%= item.getItemName() %>"/>
		</div>
		<BR CLEAR=ALL>
		<BR>
		<H4>If you like this item, you might also like these items:</H4>
		<% for (Item i : recItems) {%>	
		<div style="width:453px;border-top:1px solid black;float:left;" class="container">
			<div style="width:210px;border-right:1px dashed black;float:left;" class="coll">
				<h3 style="text-align:left;vertical-align:middle;height:80px"><a href='<%= request.getContextPath() %>/showItem.jsp?itemID=<%=i.getItemID()%>'><%=i.getItemName()%></a> </h3>
			</div>    
			<div style="width:139px;border-right:1px dashed black;float:left;" class="coll">
				<h3 style="text-align:center;vertical-align:middle;height:80px;"><img src="<%=i.getThumbImageURL()%>" alt= "<%=i.getItemName()%>"></h3>
			</div>
			<div style="width:99px;float:left;" class="coll">
				<h3 style="text-align:center;vertical-align:middle;height:80px;"> Price: <%= i.getItemPrice()%></h3>
			</div>
		</div>
		<% } %>
 	</div> 	


 	<% } else { %>
			<h3 style="text-align:center;">ERROR!</h3>
 	<% } %>
					
<%@include file="parts/footer.jsp" %>
 	